<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bootstrap表单提示验证</title>

<link rel="stylesheet" href="<c:url value='/css/select2.css'/>" />

<script src="<c:url value='/js/fuelux/fuelux.wizard.min.js'/>"></script>
<script src="<c:url value='/js/jquery.validate.min.js'/>"></script>
<script src="<c:url value='/js/additional-methods.min.js'/>"></script>
<script src="<c:url value='/js/bootbox.min.js'/>"></script>
<script src="<c:url value='/js/jquery.maskedinput.min.js'/>"></script>
<script src="<c:url value='/js/select2.min.js'/>"></script>

</head>
<body>
	<div class="main-content">
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try {
					ace.settings.check('breadcrumbs', 'fixed')
				} catch (e) {
				}
			</script>

			<ul class="breadcrumb">
				<li><i class="icon-home home-icon"></i> <a href="#">Home</a></li>

				<li><a href="#">Forms</a></li>
				<li class="active">Wizard &amp; Validation</li>
			</ul>
			<!-- .breadcrumb -->

			<div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon"> <input type="text"
						placeholder="Search ..." class="nav-search-input"
						id="nav-search-input" autocomplete="off" /> <i
						class="icon-search nav-search-icon"></i>
					</span>
				</form>
			</div>
			<!-- #nav-search -->
		</div>

		<div class="page-content">
			<div class="page-header">
				<h1>
					Form Wizard <small> <i class="icon-double-angle-right"></i>
						and Validation
					</small>
				</h1>
			</div>
			<!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->

					<h4 class="lighter">
						<i class="icon-hand-right icon-animated-hand-pointer blue"></i> <a
							href="#modal-wizard" data-toggle="modal" class="pink"> Wizard
							Inside a Modal Box </a>
					</h4>

					<div class="hr hr-18 hr-double dotted"></div>

					<div class="row-fluid">
						<div class="span12">
							<div class="widget-box">
								<div class="widget-header widget-header-blue widget-header-flat">
									<h4 class="lighter">New Item Wizard</h4>

									<div class="widget-toolbar">
										<label> <small class="green"> <b>Validation</b>
										</small> <input id="skip-validation" type="checkbox"
											class="ace ace-switch ace-switch-4" /> <span class="lbl"></span>
										</label>
									</div>
								</div>

								<div class="widget-body">
									<div class="widget-main">
										<div id="fuelux-wizard" class="row-fluid"
											data-target="#step-container">
											<ul class="wizard-steps">
												<li data-target="#step1" class="active"><span
													class="step">1</span> <span class="title">Validation
														states</span></li>

												<li data-target="#step2"><span class="step">2</span> <span
													class="title">Alerts</span></li>

												<li data-target="#step3"><span class="step">3</span> <span
													class="title">Payment Info</span></li>

												<li data-target="#step4"><span class="step">4</span> <span
													class="title">Other Info</span></li>
											</ul>
										</div>

										<hr />
										<div class="step-content row-fluid position-relative"
											id="step-container">
											<div class="step-pane active" id="step1">
												<h3 class="lighter block green">Enter the following
													information</h3>

												<form class="form-horizontal" id="sample-form">
													<div class="form-group has-warning">
														<label for="inputWarning"
															class="col-xs-12 col-sm-3 control-label no-padding-right">Input
															with warning</label>

														<div class="col-xs-12 col-sm-5">
															<span class="block input-icon input-icon-right"> <input
																type="text" id="inputWarning" class="width-100" /> <i
																class="icon-leaf"></i>
															</span>
														</div>
														<div class="help-block col-xs-12 col-sm-reset inline">
															Warning tip help!</div>
													</div>

													<div class="form-group has-error">
														<label for="inputError"
															class="col-xs-12 col-sm-3 col-md-3 control-label no-padding-right">Input
															with error</label>

														<div class="col-xs-12 col-sm-5">
															<span class="block input-icon input-icon-right"> <input
																type="text" id="inputError" class="width-100" /> <i
																class="icon-remove-sign"></i>
															</span>
														</div>
														<div class="help-block col-xs-12 col-sm-reset inline">
															Error tip help!</div>
													</div>

													<div class="form-group has-success">
														<label for="inputSuccess"
															class="col-xs-12 col-sm-3 control-label no-padding-right">Input
															with success</label>

														<div class="col-xs-12 col-sm-5">
															<span class="block input-icon input-icon-right"> <input
																type="text" id="inputSuccess" class="width-100" /> <i
																class="icon-ok-sign"></i>
															</span>
														</div>
														<div class="help-block col-xs-12 col-sm-reset inline">
															Success tip help!</div>
													</div>

													<div class="form-group has-info">
														<label for="inputInfo"
															class="col-xs-12 col-sm-3 control-label no-padding-right">Input
															with info</label>

														<div class="col-xs-12 col-sm-5">
															<span class="block input-icon input-icon-right"> <input
																type="text" id="inputInfo" class="width-100" /> <i
																class="icon-info-sign"></i>
															</span>
														</div>
														<div class="help-block col-xs-12 col-sm-reset inline">
															Info tip help!</div>
													</div>

													<div class="form-group">
														<label for="inputError2"
															class="col-xs-12 col-sm-3 control-label no-padding-right">Input
															with error</label>

														<div class="col-xs-12 col-sm-5">
															<span class="input-icon block"> <input type="text"
																id="inputError2" class="width-100" /> <i
																class="icon-remove-sign red"></i>
															</span>
														</div>
														<div class="help-block col-xs-12 col-sm-reset inline">
															Error tip help!</div>
													</div>
												</form>

												<form class="form-horizontal hide" id="validation-form"
													method="get">
													<div class="form-group">
														<label
															class="control-label col-xs-12 col-sm-3 no-padding-right"
															for="email">Email Address:</label>

														<div class="col-xs-12 col-sm-9">
															<div class="clearfix">
																<input type="email" name="email" id="email"
																	class="col-xs-12 col-sm-6" />
															</div>
														</div>
													</div>

													<div class="space-2"></div>

													<div class="form-group">
														<label
															class="control-label col-xs-12 col-sm-3 no-padding-right"
															for="password">Password:</label>

														<div class="col-xs-12 col-sm-9">
															<div class="clearfix">
																<input type="password" name="password" id="password"
																	class="col-xs-12 col-sm-4" />
															</div>
														</div>
													</div>

													<div class="space-2"></div>

													<div class="form-group">
														<label
															class="control-label col-xs-12 col-sm-3 no-padding-right"
															for="password2">Confirm Password:</label>

														<div class="col-xs-12 col-sm-9">
															<div class="clearfix">
																<input type="password" name="password2" id="password2"
																	class="col-xs-12 col-sm-4" />
															</div>
														</div>
													</div>

													<div class="hr hr-dotted"></div>

													<div class="form-group">
														<label
															class="control-label col-xs-12 col-sm-3 no-padding-right"
															for="name">Company Name:</label>

														<div class="col-xs-12 col-sm-9">
															<div class="clearfix">
																<input type="text" id="name" name="name"
																	class="col-xs-12 col-sm-5" />
															</div>
														</div>
													</div>

													<div class="space-2"></div>

													<div class="form-group">
														<label
															class="control-label col-xs-12 col-sm-3 no-padding-right"
															for="phone">Phone Number:</label>

														<div class="col-xs-12 col-sm-9">
															<div class="input-group">
																<span class="input-group-addon"> <i
																	class="icon-phone"></i>
																</span> <input type="tel" id="phone" name="phone" />
															</div>
														</div>
													</div>

													<div class="space-2"></div>

													<div class="form-group">
														<label
															class="control-label col-xs-12 col-sm-3 no-padding-right"
															for="url">Company URL:</label>

														<div class="col-xs-12 col-sm-9">
															<div class="clearfix">
																<input type="url" id="url" name="url"
																	class="col-xs-12 col-sm-8" />
															</div>
														</div>
													</div>

													<div class="hr hr-dotted"></div>

													<div class="form-group">
														<label
															class="control-label col-xs-12 col-sm-3 no-padding-right">Subscribe
															to</label>

														<div class="col-xs-12 col-sm-9">
															<div>
																<label> <input name="subscription" value="1"
																	type="checkbox" class="ace" /> <span class="lbl">
																		Latest news and announcements</span>
																</label>
															</div>

															<div>
																<label> <input name="subscription" value="2"
																	type="checkbox" class="ace" /> <span class="lbl">
																		Product offers and discounts</span>
																</label>
															</div>
														</div>
													</div>

													<div class="space-2"></div>

													<div class="form-group">
														<label
															class="control-label col-xs-12 col-sm-3 no-padding-right">Gender</label>

														<div class="col-xs-12 col-sm-9">
															<div>
																<label class="blue"> <input name="gender"
																	value="1" type="radio" class="ace" /> <span
																	class="lbl"> Male</span>
																</label>
															</div>

															<div>
																<label class="blue"> <input name="gender"
																	value="2" type="radio" class="ace" /> <span
																	class="lbl"> Female</span>
																</label>
															</div>
														</div>
													</div>

													<div class="hr hr-dotted"></div>

													<div class="form-group">
														<label
															class="control-label col-xs-12 col-sm-3 no-padding-right"
															for="state">State</label>

														<div class="col-xs-12 col-sm-9">
															<select id="state" name="state" class="select2"
																data-placeholder="Click to Choose...">
																<option value="">&nbsp;</option>
																<option value="AL">Alabama</option>
																<option value="AK">Alaska</option>
																<option value="AZ">Arizona</option>
																<option value="AR">Arkansas</option>
																<option value="CA">California</option>
																<option value="CO">Colorado</option>
																<option value="CT">Connecticut</option>
																<option value="DE">Delaware</option>
																<option value="FL">Florida</option>
																<option value="GA">Georgia</option>
																<option value="HI">Hawaii</option>
																<option value="ID">Idaho</option>
																<option value="IL">Illinois</option>
																<option value="IN">Indiana</option>
																<option value="IA">Iowa</option>
																<option value="KS">Kansas</option>
																<option value="KY">Kentucky</option>
																<option value="LA">Louisiana</option>
																<option value="ME">Maine</option>
																<option value="MD">Maryland</option>
																<option value="MA">Massachusetts</option>
																<option value="MI">Michigan</option>
																<option value="MN">Minnesota</option>
																<option value="MS">Mississippi</option>
																<option value="MO">Missouri</option>
																<option value="MT">Montana</option>
																<option value="NE">Nebraska</option>
																<option value="NV">Nevada</option>
																<option value="NH">New Hampshire</option>
																<option value="NJ">New Jersey</option>
																<option value="NM">New Mexico</option>
																<option value="NY">New York</option>
																<option value="NC">North Carolina</option>
																<option value="ND">North Dakota</option>
																<option value="OH">Ohio</option>
																<option value="OK">Oklahoma</option>
																<option value="OR">Oregon</option>
																<option value="PA">Pennsylvania</option>
																<option value="RI">Rhode Island</option>
																<option value="SC">South Carolina</option>
																<option value="SD">South Dakota</option>
																<option value="TN">Tennessee</option>
																<option value="TX">Texas</option>
																<option value="UT">Utah</option>
																<option value="VT">Vermont</option>
																<option value="VA">Virginia</option>
																<option value="WA">Washington</option>
																<option value="WV">West Virginia</option>
																<option value="WI">Wisconsin</option>
																<option value="WY">Wyoming</option>
															</select>
														</div>
													</div>

													<div class="space-2"></div>

													<div class="form-group">
														<label
															class="control-label col-xs-12 col-sm-3 no-padding-right"
															for="platform">Platform</label>

														<div class="col-xs-12 col-sm-9">
															<div class="clearfix">
																<select class="input-medium" id="platform"
																	name="platform">
																	<option value="">------------------</option>
																	<option value="linux">Linux</option>
																	<option value="windows">Windows</option>
																	<option value="mac">Mac OS</option>
																	<option value="ios">iOS</option>
																	<option value="android">Android</option>
																</select>
															</div>
														</div>
													</div>

													<div class="space-2"></div>

													<div class="form-group">
														<label
															class="control-label col-xs-12 col-sm-3 no-padding-right"
															for="comment">Comment</label>

														<div class="col-xs-12 col-sm-9">
															<div class="clearfix">
																<textarea class="input-xlarge" name="comment"
																	id="comment"></textarea>
															</div>
														</div>
													</div>

													<div class="space-8"></div>

													<div class="form-group">
														<div class="col-xs-12 col-sm-4 col-sm-offset-3">
															<label> <input name="agree" id="agree"
																type="checkbox" class="ace" /> <span class="lbl">
																	I accept the policy</span>
															</label>
														</div>
													</div>
												</form>
											</div>

											<div class="step-pane" id="step2">
												<div class="row-fluid">
													<div class="alert alert-success">
														<button type="button" class="close" data-dismiss="alert">
															<i class="icon-remove"></i>
														</button>

														<strong> <i class="icon-ok"></i> Well done!
														</strong> You successfully read this important alert message. <br />
													</div>

													<div class="alert alert-danger">
														<button type="button" class="close" data-dismiss="alert">
															<i class="icon-remove"></i>
														</button>

														<strong> <i class="icon-remove"></i> Oh snap!
														</strong> Change a few things up and try submitting again. <br />
													</div>

													<div class="alert alert-warning">
														<button type="button" class="close" data-dismiss="alert">
															<i class="icon-remove"></i>
														</button>
														<strong>Warning!</strong> Best check yo self, you're not
														looking too good. <br />
													</div>

													<div class="alert alert-info">
														<button type="button" class="close" data-dismiss="alert">
															<i class="icon-remove"></i>
														</button>
														<strong>Heads up!</strong> This alert needs your
														attention, but it's not super important. <br />
													</div>
												</div>
											</div>

											<div class="step-pane" id="step3">
												<div class="center">
													<h3 class="blue lighter">This is step 3</h3>
												</div>
											</div>

											<div class="step-pane" id="step4">
												<div class="center">
													<h3 class="green">Congrats!</h3>
													Your product is ready to ship! Click finish to continue!
												</div>
											</div>
										</div>

										<hr />
										<div class="row-fluid wizard-actions">
											<button class="btn btn-prev">
												<i class="icon-arrow-left"></i> Prev
											</button>

											<button class="btn btn-success btn-next" data-last="Finish ">
												Next <i class="icon-arrow-right icon-on-right"></i>
											</button>
										</div>
									</div>
									<!-- /widget-main -->
								</div>
								<!-- /widget-body -->
							</div>
						</div>
					</div>

					<div id="modal-wizard" class="modal">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header" data-target="#modal-step-contents">
									<ul class="wizard-steps">
										<li data-target="#modal-step1" class="active"><span
											class="step">1</span> <span class="title">Validation
												states</span></li>

										<li data-target="#modal-step2"><span class="step">2</span>
											<span class="title">Alerts</span></li>

										<li data-target="#modal-step3"><span class="step">3</span>
											<span class="title">Payment Info</span></li>

										<li data-target="#modal-step4"><span class="step">4</span>
											<span class="title">Other Info</span></li>
									</ul>
								</div>

								<div class="modal-body step-content" id="modal-step-contents">
									<div class="step-pane active" id="modal-step1">
										<div class="center">
											<h4 class="blue">Step 1</h4>
										</div>
									</div>

									<div class="step-pane" id="modal-step2">
										<div class="center">
											<h4 class="blue">Step 2</h4>
										</div>
									</div>

									<div class="step-pane" id="modal-step3">
										<div class="center">
											<h4 class="blue">Step 3</h4>
										</div>
									</div>

									<div class="step-pane" id="modal-step4">
										<div class="center">
											<h4 class="blue">Step 4</h4>
										</div>
									</div>
								</div>

								<div class="modal-footer wizard-actions">
									<button class="btn btn-sm btn-prev">
										<i class="icon-arrow-left"></i> Prev
									</button>

									<button class="btn btn-success btn-sm btn-next"
										data-last="Finish ">
										Next <i class="icon-arrow-right icon-on-right"></i>
									</button>

									<button class="btn btn-danger btn-sm pull-left"
										data-dismiss="modal">
										<i class="icon-remove"></i> Cancel
									</button>
								</div>
							</div>
						</div>
					</div>
					<!-- PAGE CONTENT ENDS -->
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content -->
	</div>
	<!-- /.main-content -->
	
	<script type="text/javascript">
			jQuery(function($) {
			
				$('[data-rel=tooltip]').tooltip();
			
				$(".select2").css('width','200px').select2({allowClear:true})
				.on('change', function(){
					$(this).closest('form').validate().element($(this));
				}); 
			
			
				var $validation = false;
				$('#fuelux-wizard').ace_wizard().on('change' , function(e, info){
					if(info.step == 1 && $validation) {
						if(!$('#validation-form').valid()) return false;
					}
				}).on('finished', function(e) {
					bootbox.dialog({
						message: "Thank you! Your information was successfully saved!", 
						buttons: {
							"success" : {
								"label" : "OK",
								"className" : "btn-sm btn-primary"
							}
						}
					});
				}).on('stepclick', function(e){
					//return false;//prevent clicking on steps
				});
			
			
				$('#skip-validation').removeAttr('checked').on('click', function(){
					$validation = this.checked;
					if(this.checked) {
						$('#sample-form').hide();
						$('#validation-form').removeClass('hide');
					}
					else {
						$('#validation-form').addClass('hide');
						$('#sample-form').show();
					}
				});
			
			
			
				//documentation : http://docs.jquery.com/Plugins/Validation/validate
			
			
				$.mask.definitions['~']='[+-]';
				$('#phone').mask('(999) 999-9999');
			
				jQuery.validator.addMethod("phone", function (value, element) {
					return this.optional(element) || /^\(\d{3}\) \d{3}\-\d{4}( x\d{1,6})?$/.test(value);
				}, "Enter a valid phone number.");
			
				$('#validation-form').validate({
					errorElement: 'div',
					errorClass: 'help-block',
					focusInvalid: false,
					rules: {
						email: {
							required: true,
							email:true
						},
						password: {
							required: true,
							minlength: 5
						},
						password2: {
							required: true,
							minlength: 5,
							equalTo: "#password"
						},
						name: {
							required: true
						},
						phone: {
							required: true,
							phone: 'required'
						},
						url: {
							required: true,
							url: true
						},
						comment: {
							required: true
						},
						state: {
							required: true
						},
						platform: {
							required: true
						},
						subscription: {
							required: true
						},
						gender: 'required',
						agree: 'required'
					},
			
					messages: {
						email: {
							required: "Please provide a valid email.",
							email: "Please provide a valid email."
						},
						password: {
							required: "Please specify a password.",
							minlength: "Please specify a secure password."
						},
						subscription: "Please choose at least one option",
						gender: "Please choose gender",
						agree: "Please accept our policy"
					},
			
					invalidHandler: function (event, validator) { //display error alert on form submit   
						$('.alert-danger', $('.login-form')).show();
					},
			
					highlight: function (e) {
						$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
					},
			
					success: function (e) {
						$(e).closest('.form-group').removeClass('has-error').addClass('has-info');
						$(e).remove();
					},
			
					errorPlacement: function (error, element) {
						if(element.is(':checkbox') || element.is(':radio')) {
							var controls = element.closest('div[class*="col-"]');
							if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
							else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
						}
						else if(element.is('.select2')) {
							error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
						}
						else if(element.is('.chosen-select')) {
							error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
						}
						else error.insertAfter(element.parent());
					},
			
					submitHandler: function (form) {
					},
					invalidHandler: function (form) {
					}
				});
			
				
				
				
				$('#modal-wizard .modal-header').ace_wizard();
				$('#modal-wizard .wizard-actions .btn[data-dismiss=modal]').removeAttr('disabled');
			})
		</script>
</body>
</html>